<template>
	<view>
		<view class="tips-content" v-show="add_show == 1" :style="'top:'+top+'rpx;'">
			<!--  -->
			<view class="tips-sjx" :style="'top:'+top+'rpx;right:'+right+'rpx;'"></view>
			<view class="tips-cont df ac sb" :style="'margin-top:'+margin+'px;'">
				<view class="tips-image">
					<image class="tips-image" :src="getImgSrc('/uploads/20250226/174055638467bec860bc850.png')"></image>
				</view>
				<view style="margin-right:10rpx">
					<view class='tips-title'>点击右上角,添加小程序</view>
					<view class='tips-desc'>{{text}}</view>
				</view>
				<image class="img12" src="https://wx.xtwaixie.com/img/close3.png" @tap="onAddClose"></image>
			</view>
		</view>
	</view>
</template>

<script>
	const info = wx.getSystemInfoSync();
	const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	export default {
		name: "addTips",
		props: {
			text: {
				type: String,
				default: '下次打开更方便'
			}
			// add_show: {
			// 	type: Number,
			// 	default: 0
			// }
		},
		data() {
			return {
				add_show: 2,
				top: 0,
				right: 0,
				margin: 0
			}
		},
		created() {
			let add_show = uni.getStorageSync('add_show') || 1;
			let top = (menuButtonInfo.top + menuButtonInfo.height) * 2
			let right = info.screenWidth - menuButtonInfo.right + menuButtonInfo.width
			if (this.text == '下次打开更方便') {
				this.top = top - 10
			} else {
				this.top = top + 4
			}
			if (info.screenWidth < 400) {
				
				this.right = right + 14
			}else{
				// this.top = top- 20
				this.right=right
			}
			const query = uni.createSelectorQuery().in(this);
			query
				.select(".tips-sjx")
				.boundingClientRect((data) => {
					this.margin = data.width
				})
				.exec();
			this.setData({
				add_show
			});
		},
		methods: {
			onAddClose() {
				this.setData({
					add_show: 2
				});
				uni.setStorageSync('add_show', 2);
			}
		}
	}
</script>

<style scoped>
	.tips-content {
		position: fixed;
		/* top: 190rpx; */
		right: 20rpx;
		z-index: 9999;
	}

	.tips-sjx {
		width: 0px;
		height: 0px;
		border: 16rpx solid rgba(0, 0, 0, 0.7);
		border-top-color: transparent;
		border-bottom-color: rgba(0, 0, 0, 0.7);
		border-left-color: transparent;
		border-right-color: transparent;
		position: fixed;
		top: 100rpx;
		/* right: -236rpx; */
		transform: translateX(-50%);
	}

	.tips-image {
		width: 51.2rpx;
		height: 51.2rpx;
		margin-right: 10rpx;
	}

	.tips-cont {
		display: flex;
		align-items: center;
		/* height: 64rpx; */
		background: rgba(0, 0, 0, 0.7);
		border-radius: 16rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.tips-title {
		font-size: 24rpx;
		color: #fbfbfd;
		margin-bottom: 4rpx;
	}

	.tips-desc {
		font-size: 24rpx;
		color: #fbfbfd90;
	}
</style>